import React, { useState, useEffect } from 'react';
import { MiddleCountStyled } from './style';
import { toThousands } from '@/utils/tools/common';
import { BiOverviewDto } from '@/services/types';
import FlowReportItem from '../FlowReportItem';
import LinesReact from './line';
import MainBody from './mainBody';
import { getOverViewDto } from '@/services/index';

type MiddleCountPropsType = {

};

const MiddleCount: React.FC<MiddleCountPropsType> = (props) => {
  // const [curData, setCurData] = useState<BiOverviewDto>({
  //   archNum: 0,
  //   digitizationRate: 0,
  //   dossierNum: 0,
  //   electronicsArchNum: 0,
  //   entityArchNum: 0,
  //   fileTotalSize: 0,
  //   monthAddFileSizeNum: 0,
  //   sectNum: 0,
  //   totalArchNum: 0,
  //   yearAddArchNum: 0,
  //   yearAddFileSizeNum: 0,
  // });


  const [overviewDto, setOverviewDto] = useState<BiOverviewDto>({
    archTotal: 0,
    dossierTotal: 0,
    dossierArchTotal: 0,
    borrowTatal: 0,
    handOverTatal: 0,
    receiveTatal: 0,
    collectTatal: 0,
    electronicBorrowTotal: 0,
    entityArchTotal: 0,
    entityBorrowTotal: 0,
    destroyTotal: 0,
    longSaveTotal: 0,
    editAndResearchTotal: 0
  });
  useEffect(() => {
    getOverViewDto().then((res: BiOverviewDto) => {
      setOverviewDto(res);
    });
  }, [])
  useEffect(() => {
    // props.data && setCurData(props.data);
  }, [overviewDto]);
  return (
    <MiddleCountStyled>
      <div>
        <div className='middle-count'>
          <div className='count-left'>
            <div className='left-top'>
              <div className='left-item1 left-item'>
                <div className='item-words'>
                  <div>馆藏总文件量（件）</div>
                </div>
                <div className='item-0'>{toThousands(overviewDto?.archTotal)}</div>

              </div>
              <div className='left-item2 left-item'>
                <div className='item-words'>
                  <div>馆藏总案卷量（卷）</div>
                </div>
                <div className='item-0'>{toThousands(overviewDto.dossierTotal)}</div>

              </div>
              <div className='left-item3 left-item'>
                <div className='item-words'>
                  <div>馆藏总卷内量（卷内）</div>
                </div>
                <div className='item-0'>{toThousands(overviewDto.dossierArchTotal)}</div>

              </div>
              <div className='left-item4 left-item'>
                <div className='item-words'>
                  <div>查询利用（人/次）</div>
                </div>
                <div className='item-0'>{toThousands(overviewDto.borrowTatal)}</div>

              </div>

            </div>
          </div>
        </div>
        <div style={{ "position": "relative", "width": "100%", "margin": " 2vh auto" }}>
          <div className='mainHeader' style={{ "position": "relative" }} >
            <div
            > <FlowReportItem title="业务移交" data={`${toThousands(overviewDto.handOverTatal)}（件）`}></FlowReportItem>
            </div>
            <div style={{ "position": "absolute", "width": "20%", "left": "25%", "top": "30%" }}>
              <LinesReact isHaveArrow={true} width="100%"></LinesReact>
            </div>

            <FlowReportItem title='档案接收' data={`${toThousands(overviewDto.receiveTatal)}(件)`}></FlowReportItem>

            <FlowReportItem title='在线收集' data={`${toThousands(overviewDto.collectTatal)}（件）`}></FlowReportItem>

            <div style={{ "position": "absolute", "width": "30%", "height": "20%", "right": "-2%", "bottom": "-50%" }} >
              <div style={{ "transform": "rotate(90deg)", "width": "25%", "position": "relative", "right": "-25%" }}>
                <LinesReact isHaveArrow={true} width="100%"></LinesReact>
              </div>
              <div className='collectRine' style={{ "transform": "rotate(180deg)", "width": "65%", "position": "relative", "right": "28%" }}>
                <LinesReact isHaveArrow={true} width="100%"></LinesReact>
              </div>
            </div>
          </div>



          <div className="mainBody" style={{ "display": "flex", "position": "relative" }} >
            <div >
              <FlowReportItem title='电子利用' data={`${toThousands(overviewDto.electronicBorrowTotal)}(件)`} ></FlowReportItem>
              <div style={{ "transform": "rotate(180deg)", "position": "absolute", "width": "20%", "left": "15%", "bottom": "30%" }}>
                <LinesReact isHaveArrow={true} width="100%"></LinesReact>
              </div>
            </div>
            <div>
              <div style={{
                "transform": "rotate(90deg)", "position": "relative",
              }} className='mainBodyLine'>
                <LinesReact width="30px" isHaveArrow={true}></LinesReact>
              </div>
              <MainBody></MainBody>
            </div>
            <div >
              <div style={{ "position": "absolute", "width": "20%", "bottom": "30%", "right": "15%" }}>
                <LinesReact width="100%" isHaveArrow={true}></LinesReact>
              </div>
              <div>
                <FlowReportItem title='实体利用' data={`${toThousands(overviewDto.entityArchTotal)}(件)`}></FlowReportItem>
              </div>

            </div>

          </div>
          <div className='mainfloot'>


            <div style={{ "width": "25%" }} ></div>

            <div className='mainFlootCenter' style={{ "width": "50%", "position": "relative" }} >
              <div style={{
                "width": "35%",
                "position": "absolute", "right": "15%"
              }} className='mainFlootLine'>
                <LinesReact width="100%" isHaveArrow={true} ></LinesReact></div>

              <div style={{
                "width": "35%", "position": "absolute",
                "transform": "rotate(180deg)",
                "left": "15%"
              }} className='mainFlootLine'>
                <LinesReact isHaveArrow={true} width="100%"></LinesReact>

              </div>

              <div >
                <div style={{ "transform": "rotate(90deg)" }}>
                  <LinesReact width="40%" isHaveArrow={true}></LinesReact>
                </div>
                <FlowReportItem title='档案鉴定' data={`${toThousands(overviewDto.destroyTotal)}(件)`}></FlowReportItem>

              </div>
              <div> <div style={{ "transform": "rotate(90deg)" }}>
                <LinesReact width="40%" isHaveArrow={true}></LinesReact>
              </div>
                <FlowReportItem title='长期保存' data={`${toThousands(overviewDto.longSaveTotal)}(件)`}></FlowReportItem></div>
              <div> <div style={{ "transform": "rotate(90deg)" }}>
                <LinesReact width="40%" isHaveArrow={true}></LinesReact>
              </div>
                <FlowReportItem title='档案编研' data={`${toThousands(overviewDto.editAndResearchTotal)}(件)`}></FlowReportItem>
              </div>

            </div>
            {/* <div style={{ "width": "25%", "position": "relative" }}  >
              <div style={{
                "transform": "rotate(90deg)", "position": "absolute", "right": "18%",
                "top": "-35%",
                "width": "20%"
              }}>
                <LinesReact width="100%" isHaveArrow={true}></LinesReact>
              </div>
              <div style={{ "margin": "0 0 0 0 ", "position": "relative", "right": "-45%" }}>
                <FlowReportItem title='实体借阅' data={`${toThousands(overviewDto.entityBorrowTotal)}(件)`}></FlowReportItem>
              </div>


            </div> */}

          </div>


        </div >
      </div>


    </MiddleCountStyled >
  );
};

export default MiddleCount;
